<template>
  <el-dialog
    title="批量导入用户的结果统计"
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="440px"
  >
    <el-row>
      <el-col :span="15">读取成功</el-col>
      <el-col :span="9">
        <span class="number" :class="{error: result.userReadCount == 0}">{{result.userReadCount}}</span>个
      </el-col>
    </el-row>
    <el-row style="margin-top: 8px;">
      <el-col :span="15">导入成功</el-col>
      <el-col :span="9">
        <span class="number" :class="{success: result.userAddSuccessCount > 0}">{{result.userAddSuccessCount}}</span>个
      </el-col>
    </el-row>
    <el-row style="margin-top: 8px;">
      <el-col :span="15">导入失败</el-col>
      <el-col :span="9"><span class="number error">{{result.userReadCount - result.userAddSuccessCount}}</span>个</el-col>
    </el-row>
    <el-row v-for="errorType in errorTypes" :key="errorType.key">
      <el-col v-if="errorType.count > 0" :span="15" style="padding-left:24px">{{errorType.label}}</el-col>
      <el-col v-if="errorType.count > 0" :span="9">
        <span class="number error">{{errorType.count}}</span>个
        <el-button
          icon="el-icon-download"
          style="margin-left: 8px"
          @click="download(errorType)"
        >下载</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      result: {
        userReadCount: 0,
        userAddSuccessCount: 0
      },
      errorTypes: [
        {key: 'orgNotFoundUsers', label: '社区名称错误的', count: 0},
        {key: 'requiredErrorUsers', label: '身份证或手机号或姓名为空的', count: 0},
        {key: 'telephoneExistUsers', label: '已存在相同手机号码的', count: 0},
        {key: 'idcardExistUsers', label: '已存在相同身份证号的', count: 0}
      ]
    }
  },
  methods: {
    show(result) {
      Object.assign(this.result, result);
      this.errorTypes.forEach(errorType => {
        errorType.count = this.result[errorType.key].length;
      });
      this.visible = true;
    },
    async download(errorType) {
      let response = await this.$http({
        method: 'post',
        url: '/api/user/json2xls',
        data: JSON.stringify({filename: errorType.label, users: this.result[errorType.key]}),
        responseType: 'blob',
        headers: {
          'Content-Type': 'application/json'
        }
      });
      let url = window.URL.createObjectURL(new Blob([response]));
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', `${errorType.label}.xls`);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}
</script>

<style scoped>
.el-row {
  line-height: 36px;
}
.number {
  font-weight: 500;
  font-size: 16px;
  margin-right: 2px;
}
.number.error {
  color: #F56C6C;
}
.number.success {
  color: #67C23A;
}
</style>